import { login, getUserInfo, getUserDetailById } from '@/api/user'
import { resetRouter } from '@/router'
import { getToken, removeToken, setToken } from '@/utils/auth'
export default {
  namespaced: true,
  state: {
    token: getToken() || '',
    userInfo: {}
  },
  mutations: {
    setToken(state, tokenval) {
      // 存入vuex
      state.token = tokenval
      // 存入本地
      setToken(tokenval)
    },
    setUserinfo(state, userInfo) {
      state.userInfo = userInfo
    },
    removeUserInfo(state) {
      state.token = ''
      state.userInfo = {}
      removeToken()

      // 重置路由
      resetRouter()
    }
  },
  actions: {
    async fetchLogin({ commit }, form) {
      // 调用接口请求
      const res = await login(form)
      // 拿到返回值，提交muataions函数进行修改
      commit('setToken', res)
    },
    async fetchGetUserInfo({ commit }) {
      // 问题：1.后端多个接口对应前端的一个业务 组合数据 2.接口之间有前后的依赖关系 await可以保证串行的结构
      const res = await getUserInfo()
      // 插入头像请求
      const res_ = await getUserDetailById(res.userId)
      // 合并两个接口的返回的对象
      commit('setUserinfo', { ...res, ...res_ })

      // 当我们想要另外一个模块中要使用action函数内部的数据时
      // 应该把这个数据return出去
      return res
    }
  }
}
